<template>
  <t-card class="dashboard-detail-card" :style="{ height: '464px' }">
    <div class="card-content">
      <div class="hw-flex-style-b-c">
        <t-tabs v-model="cruuent" @change="changeTab">
          <t-tab-panel :value="item.value" :label="item.title" v-for="item in tabList" :key="item.value"> </t-tab-panel>
        </t-tabs>
        <span class="hw-click-cursor rihgt-title" @click="pathComment">查看全部</span>
      </div>
      <div class="table-box">
        <div class="table-box-item" v-for="item in list" :key="item.id">
          <div class="table-box-item-left">
            <div class="table-box-item-left-top">
              <t-avatar v-if="item.coverUrl" size="24px" :image="urls + item.coverUrl + webUrls"></t-avatar>
              <t-avatar
                size="24px"
                style="margin-right: 15px"
                v-else
                image="https://static-1316349889.cos.ap-shanghai.myqcloud.com/assets/img/userImg.png"
              ></t-avatar>
              <span class="item-name">{{ item.name }}</span>
              <span class="item-time">{{ item.createDate }}</span>
            </div>
            <div class="table-box-item-left-bottom">
              <span>{{ item.content }}</span>
            </div>
          </div>
          <div class="table-box-item-right">
            <div
              class="row-role"
              :class="{
                'row-role-1': item.commentStatus == 2,
                'row-role-2': item.commentStatus == 4 || item.commentStatus == 1,
                'row-role-3': item.commentStatus == 3,
              }"
            >
              {{
                item.commentStatus == 1 || item.commentStatus == 2
                  ? ' ● 待审核'
                  : item.commentStatus == 3
                  ? '● 已通过 '
                  : '● 已删除'
              }}
            </div>
          </div>
        </div>
      </div>
      <isnull :title="cruuent === 1 ? '暂无评论' : '暂无留言'" v-if="list.length == 0" />
      <!-- <t-table
        maxHeight="360px"
        row-key="index" 
        :data="list"
        :columns="columns"
        :table-content-width="tableLayout === 'fixed' ? undefined : '100%'"
        :resizable="false"
      >
        <template #name="{ row }">
          <t-avatar v-if="row.coverUrl" size="30px" :image="urls + row.coverUrl + webUrls"></t-avatar>
          <t-avatar
            size="30px"
            style="margin-right: 15px"
            v-else
            image="https://static-1316349889.cos.ap-shanghai.myqcloud.com/assets/img/userImg.png"
          ></t-avatar>
          <span class="titles">{{ row.name }}</span>
        </template>

        <template #commentStatus="{ row }">
          <div
            class="row-role"
            :class="{
              'row-role-1': row.commentStatus == 2,
              'row-role-2': row.commentStatus == 4 || row.commentStatus == 1,
              'row-role-3': row.commentStatus == 3,
            }"
          >
            {{
              row.commentStatus == 1 || row.commentStatus == 2
                ? ' ● 待审核'
                : row.commentStatus == 3
                ? '● 已发布 '
                : '● 已删除'
            }}
          </div>
        </template>
      </t-table> -->
    </div>
  </t-card>
</template>

<script setup lang="ts">
// @ts-nocheck
import isnull from '@/components/isnull/isNull.vue';
import { urls } from '@/utils/request/upload';
import { commentList } from '@/api/comment/comment';
import { ref, reactive } from 'vue';
import { tabList } from '../data';
import { useRouter } from 'vue-router';
import { roleList1, BUY_COLUMNS1 } from '../data';

const webUrls: string = '?imageView2/2/w/30/h/30/format/webp';
const tableLayout = ref('fixed');
const columns = BUY_COLUMNS1;
const router = useRouter();
const cruuent = ref(1);
const parmas = reactive({
  CommentStatus: 0, //
  showpieceId: 1, //展品主键
  projectId: localStorage.getItem('projectId'), //项目主键
  value: '', //关键字
  pageNo: 1,
  pageSize: 5,
  isSelf: 0,
});
const list = ref([]);
const init = async () => {
  try {
    let { data } = await commentList(parmas);

    list.value = data.data;
    console.log(list.value, 234);

    if (list.value.length < total.value) {
    } else {
    }
  } catch {}
};
const changeTab = () => {
  if (cruuent.value === 1) {
    parmas.showpieceId = 1;
  } else {
    parmas.showpieceId = 0;
  }
  parmas.pageNo = 1;
  list.value = [];
  init();
  // console.log(cruuent.value);
};
const pathComment = () => {
  router.push({
    path: '/prijectMenu/administration',
    query: {
      projectId: localStorage.getItem('projectId'),
      type: 5,
      tration: cruuent.value,
    },
  });
};
init();
</script>

<style lang="less" scoped>
.card-content {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  // overflow-y: auto;
  // :deep(.t-table__ellipsis) {
  //   font-size: 16px !important;
  // }
}
.table-box {
  width: 100%;
  flex: 1;
  overflow-y: auto;
}
.table-box::-webkit-scrollbar {
  display: none;
}
.item-box {
  padding: 20px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.item-img {
  width: 48px;
  height: 48px;
  background: #d8d8d8;
}
.item-text {
  font-size: 12px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #666666;
  line-height: 17px;
  margin-top: 8px;
}
:deep(.t-table__content) {
  min-width: 600px;
}
.row-role-1 {
  color: #e34d59;

  border: 3px;
}
.row-role-2 {
  color: #e34d59;

  border: 3px;
}
.row-role-3 {
  color: #00a870;

  border: 3px;
}
.row-role {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 64px;
  height: 24px;
  margin: 0 auto;
  font-size: 16px;
  border-radius: @radius-hw-box1;
}
.action-box {
  display: flex;
}
.action-item {
  width: 40px;
  height: 40px;
  // border: 1px solid #999;
  img {
    width: 40px;
    height: 40px;
  }
}
.action-item-r {
  border-left: none;
}
.hw-flex-style-b-c {
  width: 100%;
  padding: 0 24px;
  height: 48.5px;
  // padding-bottom: 16px;
  box-shadow: inset 0px -1px 0px 0px rgba(230, 230, 230, 0.5);
  margin-bottom: 12px;
}
.rihgt-title {
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.4);
  line-height: 20px;
}
.rihgt-title:hover {
  color: rgba(0, 0, 0, 0.59);
}
.titles {
  margin-left: 8px;
  font-size: 16px;
  color: rgba(0, 0, 0, 0.9);
  line-height: 20px;
}
:deep(.t-card__body) {
  padding: 0px;
  padding-bottom: 16px !important;
  height: 100%;
}
:deep(.t-table__header--fixed:not(.t-table__header--multiple) > tr > th) {
  background: #fff;
}
:deep(.t-table .t-text-ellipsis) {
  font-size: 14px;
}
:deep(.t-table__th-cell-inner) {
  font-size: 14px;
}
:deep(.t-table__header) {
  height: 48px;
}
:deep(.t-table__body tr) {
  height: 60px;
}
:deep(.t-table__body tr td) {
  border-bottom: none !important;
}
:deep(.t-table th, .t-table td) {
  border-color: #fff;
}
:deep(.t-table__header.t-table__header--fixed) {
  z-index: 9 !important;
}
:deep(.t-table__body tr td) {
  border-bottom: none !important;
}
.table-box-item {
  display: flex;
  justify-content: space-between;
  padding: 12px 24px;
  width: 100%;
  height: 84px;
}
.table-box-item:hover {
  background: #f5f5f5;
}
.table-box-item-left {
  display: flex;
  flex-direction: column;
  width: 70%;
}
.table-box-item-left-top {
  display: flex;
  align-items: center;
}
.item-name {
  font-size: 16px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.59);
  line-height: 24px;
  margin-left: 8px;
}
.item-time {
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.38);
  line-height: 22px;
  margin-left: 12px;
}
.table-box-item-left-bottom {
  margin-top: 12px;
  width: 100%;
  font-size: 16px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.8);
  line-height: 24px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
